<template>
  <div class="homeBox" style="overflow: hidden; height: 100vh">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-header
        style="text-align: right; font-size: 12px; background: #38a28a"
      >
        <h2 style="float: left; color: #fff">教育后台管理系统</h2>
        <span style="line-height: 60px; float: right; color: #fff">{{userName}}</span>
        <!-- <input type="file"> -->
        <img
          style="
            width: 50px;
            border-radius: 50%;
            padding: 0px 10px;
            float: right;
            margin-top:5px
          "
          :src='img'
          alt=""
        />
        <i
          style="
            display: inline-block;
            width: 1px;
            background: #fff;
            height: 30px;
            margin: 0 5px;
            float: right;
            margin-top:15px
          "
        ></i>
        <span
          class="iconfont"
          style="float: right; position: relative; left: -10px; color: #fff"
          >&#xe679;</span
        >
      </el-header>

      <el-container>
        <el-aside width="200px" style="height: 100%; background: #4a5259">
          <el-menu :default-openeds="['1', '3']">
            <el-menu-item index="1" @click="jump">
              <template slot="title">
                <i class="el-icon-sell" style="font-size:16px">首页</i>
              </template>
            </el-menu-item>
            <el-menu-item index="2" @click="jump">
              <template el-icon-s-check slot="title">
                <i class="el-icon-document-copy" style="font-size:16px">课程管理</i>
              </template>
            </el-menu-item>
            <el-submenu index="3">
              <template slot="title"
                ><i class="el-icon-menu"></i>订单管理</template
              >
              <el-menu-item-group style="background: #4a5259">
                <el-menu-item index="3-1" @click="jump">订单</el-menu-item>
                <el-menu-item index="3-2" @click="jump">详情</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"
                ><i class="el-icon-s-check"></i>用户管理</template
              >
              <el-menu-item-group style="background: #4a5259">
                <el-menu-item index="4-1" @click="jump">学院</el-menu-item>
                <el-menu-item index="4-2" @click="jump">讲师</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"
                ><i class="el-icon-picture"></i>资讯管理</template
              >
              <el-menu-item-group style="background: #4a5259">
                <el-menu-item index="5-1" @click="jump">轮播图</el-menu-item>
                <el-menu-item index="5-2" @click="jump">文章</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title"
                ><i class="el-icon-setting"></i>促销管理</template
              >
              <el-menu-item-group style="background: #4a5259">
                <el-menu-item index="6-1" @click="jump">秒杀活动</el-menu-item>
                <el-menu-item index="6-2" @click="jump">优惠卷</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="7" @click="jump">
              <template slot="title">
                <i class="el-icon-menu" style="font-size:16px">系统设置</i>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <div style="width: 100%; background: #eee">
          <router-view></router-view>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
@font-face {
  font-family: "iconfont";
  src: url("../../../public/font/iconfont.eot");
  src: url("../../../public/font/iconfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../../public/font/iconfont.woff2") format("woff2"),
    url("../../../public/font/iconfont.woff") format("woff"),
    url("../../../public/font/iconfont.ttf") format("truetype"),
    url("../../../public/font/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 18px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.homeBox {
  height: 100vh;
}
.el-menu {
  background: rgb(74, 82, 89);
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-menu-item {
  color: #fff;
}
.el-submenu__title {
  color: #fff !important;
}
.el-menu-item.is-active {
  background: #333;
  color: #fff;
}
.el-aside {
  color: #333;
}
.el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background-color: #333;
}
.el-submenu__title:hover {
  outline: 0;
  background-color: #333;
}
.el-aside {
  overflow: auto;
}
</style>

<script>
export default {
  data() {
    return {
      userName:'',
      img:''
    };
  },
  mounted() {
    let obj = JSON.parse(localStorage.getItem('user'))
    this.userName = obj.users;
    this.img = obj.img
  },
  created(){
  },
  methods: {
    jump(e) {
      if (e.index == 1) {
        this.$router.push("firstPage");
      } else if (e.index == 2) {
        this.$router.push("curriculum");
      } else if (e.index == "3-1") {
        this.$router.push("orderD");
      } else if (e.index == "3-2") {
        this.$router.push("orderT");
      } else if (e.index == "4-1") {
        this.$router.push("rearnyua");
      } else if (e.index == "4-2") {
        this.$router.push("lecturer");
      } else if (e.index == "5-1") {
        this.$router.push("lunbo");
      } else if (e.index == "5-2") {
        this.$router.push("article");
      } else if (e.index == "6-1") {
        this.$router.push("seckill");
      } else if (e.index == "6-2") {
        this.$router.push("Discount");
      } else if (e.index == 7) {
        this.$router.push("system");
      }
    },
  },
};
</script>